<template>
	<view class="w-det-tab">
		<scroll-view  scroll-x="true" :style="'background-color:'+bgc+';'" :class="fixed?'fxied':''" :scroll-left='scrollLeft' scroll-with-animation>
			<view class="tabList">
				<view
					:class="'tabItem'+(currentIndex==index?' thisOpenSelect':'')"
					v-for="(item,index) in tabs"
					:id="'item'+index"
					:key='index'
					@click="_onClick(index)"
					ref='item'>
					<view class="tab-list">
						<template v-if="currentIndex==index">
							<image class="tab-img" :src="item.onimg" />
						</template>
						<template v-else>
							<image class="tab-img" :src="item.imgs" />
						</template>

						<view class="tab-txt">{{item.name}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props:{
			current: {
				type: Number,
				default: 0
			},
			values: {
				type: Array,
				default () {
					return []
				}
			},
			bgc:{
				type:String,
				default:''
			},
			fixed:{
				type:Boolean,
				default:false
			},
			scrollFlag:{
				type:Boolean,
				default:false
			},
		},
		data() {
			return {
				currentIndex: 0,
				windowWidth:0,	//设备宽度
				leftList:[],	//选项距离左边的距离
				widthList:[],	//选项宽度
				scrollLeft:0,   //移动距离
				newScroll:0,    //上一次移动距离(用来判断是左滑还是右滑)
				wornScroll:0,    //上一次移动距离(用来判断是左滑还是右滑)
				tabs:[
					{
						imgs:'/static/tabBar-exam/1.png',
						onimg:'/static/tabBar-exam/11.png',
						name:'识记模式'
					},
					{
						imgs:'/static/tabBar-exam/1.png',
						onimg:'/static/tabBar-exam/11.png',
						name:'填图模式'},
					{
						imgs:'/static/tabBar-exam/2.png',
						onimg:'/static/tabBar-exam/22.png',
						name:'真题训练'
					}
				]
			};
		},
		mounted(){
			setTimeout(()=>{
				uni.getSystemInfo({
				    success: (res)=> {
						this.windowWidth = res.windowWidth+12;
				        // console.log(this.windowWidth);
						this.values.forEach((i,v)=>{
							let info = uni.createSelectorQuery().in(this);
							info.select("#item"+v).boundingClientRect((res)=>{
								// 获取第一个元素到左边的距离
								// if(v==0){
								// 	this.startLenght = res.left
								// }
							    this.widthList.push(res.width)
								this.leftList.push(res.left)

							}).exec()
						})
						// console.log(this.leftList)
						// console.log(this.widthList)
				    }
				});
			})
		},
		created() {
			this.currentIndex = this.current
			if(this.scrollFlag){
				setTimeout(()=>{
					this.tabListScroll(this.current)
				},300)
			}
		},
		watch: {
			current(val) {
				if (val !== this.currentIndex) {
					this.currentIndex = val
					if(this.scrollFlag){
						this.tabListScroll(val)
					}
				}
			},
		},
		methods: {
			_onClick(index) {
				if (this.currentIndex !== index) {
					this.currentIndex = index
					this.$emit('clickItem', {currentIndex:index})
					// 开启滚动
					if(this.scrollFlag){
						this.tabListScroll(index)
					}
				}
			},
			// 选项移动
			tabListScroll(index){
				let scoll = 0;
				this.wornScroll = index;
				// this.wornScroll-this.newScroll>0 在向左滑  ←←←←←
				if(this.wornScroll-this.newScroll>0){
					for(let i = 0;i<this.leftList.length;i++){
						if(i>1&&i==this.currentIndex){
							scoll = this.leftList[i-1]
						}
					}
					// console.log('在向左滑',scoll)
				}else{
					if(index>1){
						this.widthList.forEach((i,v)=>{
							if(v<index-1){
								scoll += i+30
							}
						})
					}else{
						scoll = 0
					}
					console.log('在向右滑')
				}
				this.newScroll = this.wornScroll;
				this.scrollLeft = scoll;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fxied{
		position: fixed;
		top: 0;
		z-index: 2;
	}
	.w-det-tab{
		display: flex;
		flex-direction: column;
	}
	.tabList{
		display: flex;
		flex-direction:row;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: center;
		padding: 0 30rpx 0rpx 30rpx;

		.tabItem{
			display: flex;
			color: #666;
			.tab-list{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.tab-img{
					width:48rpx;
					height:48rpx;
					line-height: 50rpx;
				}
				.tab-txt{
					font-size: 24rpx;
					line-height: 40rpx;
					transition: all 0.3s ease 0s;
				}
			}
		}
		.tabItem:first-child{
			// margin-left: 22rpx;
		}
		.tabItem:last-child{
			margin-right: 24rpx;
		}
		.thisOpenSelect{
			font-weight: bold;
			.tab-list{
				.tab-img{
					width:48rpx;
					height:48rpx;
					line-height: 50rpx;
				}
				.tab-txt{
					font-size: 24rpx;
					line-height: 40rpx;
					color: #2447FF;
					transition: all 0.3s ease 0s;
				}
			}
		}
	}
</style>

